<template>
	<div>
	  <div class="container-water-fall">
			<waterfall :col='col' :loadDistance="loadDistance"  @finish="finish"
				:data="goodsList"   @loadmore="loadmore"   :isTransition="false"
				 >
				<template>					
			    <div class="box" @click="jumpDetail(item.comId)"
			    	 v-for="item in goodsList">
			    	<div class="imgWrap">
			    	   <img :src="item.goodsImage" alt="" />
			    	</div>
			    	<div class="desc">
			    	   <div class="title">{{item.comName}}</div>
			    	   <div class="desc_layout1">
			    	   	  <span class="x-red">&yen;<span class="ft16">{{item.comPrice}}</span></span>
			    	   	  <span>{{item.goodsWants}}人想要</span>
			    	   </div>
				       <div class="desc_layout2">
				    		<img :src="item.avatar" alt="" />
				    		<span style="vertical-align: -3px;">{{item.userNickname}}</span>
				       </div>		    	   
			    	</div>
			    </div>
			    </template>
			</waterfall>
	  </div>
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {       	 
       	  timer:true,
       	  loadDistance:100,
	   	  url2:this.$api+'/marketorderservice/api/v1/market/searchGoodsList',   // 用于请求商品数据列表
	      categoryId:this.currentCategoryId,   // 记录当前的分类ID
	      params:{pageNum:1},       // 保存页码	
          goodsList:[],             // 显示的数据列表
          col:2,                    // 一行显示2个item
          listData:[]              // 记录所有分类的情况
       }
	},
    
    watch: {    	
      currentCategoryId(newVal,oldVal) {      	 
         let that=this  
         this.categoryId=newVal 
         // 切换的时候所有生成的数据都的isNew都变为false
         for(var i=0;i<this.listData.length;i++){
         	this.listData[i].isNew=false
         }
         // 在切换的时候要记录上一个数据的滚动高度
         if(oldVal){
         	let oldIndex=this.checkItem(this.listData,oldVal)
         	that.listData[oldIndex].currentScroll=document.documentElement.scrollTop||document.body.scrollTop        	
         }
         let index=this.checkItem(this.listData,newVal)         
         // 表明这个分类ID已经存在于记录数组中了 记录当前的滚动位置给旧的分类，
         // 读取当前选中分类的数据 且读取当前选中分类滚动位置并设置 （不请求数据）
         if(index>=0){
         	this.goodsList=this.listData[index].rows             	
            this.timer=false
            setTimeout(function(){
            	that.timer=true
            },500)
            // 不需要请求数据了
         	return false
         }else{         	
         	 // 文档滚动高度重置为0
         	 document.documentElement.scrollTop=0
         	 document.body.scrollTop=0         	
         	 // 表明这个分类ID不存在于记录数组中了，需创建
	         let obj={}
	         obj.categoryId=newVal
	         obj.rows=[]
	         // 不存在就是第一次加载这个分类内容
	         obj.currentScroll=0   // 储存滚动高度 
	         obj.pageNum=1;        // 储存每一个数据下一次请求的页码      
	         obj.maxPage=1;        // 储存每一个数据的最大页码数
	         obj.isNew=true;       // 储存这个数据是否是新生成的
	         this.listData.push(obj)        
	         this.getData(1)
         }        
      }
    },
    props:['currentCategoryId'],    
	methods: {	
  		// 查看某一项是否存在于数组中
  		checkItem(arr,item){
  			let result=-1
  			for(var i=0;i<arr.length;i++){
  				if(arr[i].categoryId==item){
  					result=i
  					break;
  				}
  			}
  			return result
  		},	

	    // 跳转详情页	
	    jumpDetail(id){
	   	   let arg='[{"comId":"'+id+'"}]' 
	   	   this.link('/market/goods/detail',arg)	   	
	    },
        finish(){       	     	
        	let index=this.checkItem(this.listData,this.categoryId)
        	let that=this
        	if(!this.listData[index].isNew){
               document.documentElement.scrollTop=this.listData[index].currentScroll
        	}            
        },
        loadmore(){        
    	 if(this.timer){
		     let that=this	     		 
	         // 读取当前分类的页码
	         let index=that.checkItem(that.listData,that.categoryId)   	         
	         that.listData[index].pageNum++;
	         if(that.listData[index].pageNum>that.listData[index].maxPage){
	         	that.listData[index].pageNum=that.listData[index].maxPage
	         	return false
	         }else{		         
		        that.getData(that.listData[index].pageNum)		         	         	
	         }       	 	
    	 }              
        },
  	    getData(pageNum){
		 let that=this
	     that.$Axios2.postRequest(that.url2,{"categoryId":that.categoryId},
	     {"pageNum":pageNum}).
	     then(function(res){
	     	console.log(res)
	     	// 找到对应的项 加进去
	     	let index=that.checkItem(that.listData,that.categoryId)
	     	// 连接数据
	     	that.listData[index].rows=that.listData[index].rows.concat(res.page.records)
	     	that.listData[index].maxPage=res.page.pages
	     	// 赋值给显示数据
	     	that.goodsList=that.listData[index].rows    	     	
	     })		   	
	    }          
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.getData(1)
	}
}	
</script>

<style scoped="">
.container-water-fall{padding: 0px 10px 60px;}	
.box {margin-top:16px;}
.imgWrap>img{width: 100%;border-radius: 10px 10px 0 0;display: block;}
.desc{background: #fff;border-radius: 0 0 10px 10px;padding: 10px;}
.desc .title{font-weight: bold;font-size: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.desc_layout1{display: flex;justify-content: space-between;margin-top: 5px;color: #bcbcbc;}
.x-red{color: #e86468;font-weight: bold;}
.ft16{font-size: 16px;}
.desc_layout2{display: flex;margin-top: 5px;color: #bcbcbc;align-items: center;}
.desc_layout2>img{width: 20px;height: 20px;border-radius: 50%;margin-right: 5px;}

</style>